<template>
  <div class="l_authority">
    <el-card class="box-card">
      <!-- 按钮 -->
      <!-- <el-button type="primary" @click="dialogFormVisible = true">新增角色</el-button> -->
      <!-- 弹窗 -->
      <el-dialog title="新增角色" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="角色名" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 内容 -->
      <el-table :data="userlist">
        <el-table-column label="id" prop="id" min-width="60"></el-table-column>
        <el-table-column label="编号" prop="sn" min-width="60"></el-table-column>
        <el-table-column label="申请人" prop="name" min-width="100"></el-table-column>
        <el-table-column label="手机号" prop="phone" min-width="100"></el-table-column>
        <el-table-column label="地址" prop="address" min-width="140"></el-table-column>
        <el-table-column label="喵屋名称" prop="cat_room_name" min-width="140"></el-table-column>
        <el-table-column label="喵屋图片" prop="cat_images" min-width="80">
          <template slot-scope="scope">
            <div>
                <img v-for="url in scope.row.cat_images" :key="url" :src="url" :alt="url" class="image-item" />
              </div>
          </template>
        </el-table-column>

        <el-table-column label="附近图片" prop="cat_images" min-width="80">
         <template slot-scope="scope">
            <div>
              <img v-for="url in scope.row.cat_images" :key="url" :src="url" :alt="url" class="image-item" />
              </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <el-button @click="passClick(scope.row)"  type="text" size="small" icon="el-icon-plus">通过</el-button>
            <el-button @click="refuseClick(scope.row)" type="text" size="small" icon="el-icon-lock">拒绝</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>

import util from "../../utils/request"

export default {
  name: "authority",
  data() {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        username: '',
        password: '',
        name: '',
        phone: ''
      },
      formLabelWidth: '120px',
      userlist: [
        {
          id: '',
          sn: '',
          name: '',
          phone: '',
          address: '',
          cat_room_name:'',
          target_build_number:0,
          cat_images: [],
          ambience_images: [],
          raise_build_number:0,
        },
      ],
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 2
      }
    };
  },
  created() {
     this.getApplyList();
  },
  methods: {
    async getApplyList() {
      var _this = this;
      var myToken = window.localStorage.getItem("token");
      var dataObj = {};
      dataObj.page = 1;
      dataObj.limit = 10;
      util.call_netA("post", "/admin/cat-room-apply/list", dataObj, function (data) {
        var res = data.data;
        if (!myToken) {
          _this.$message({
            message: res.msg,
            center: true,
            type: 'success'
          });
          _this.$router.push('/');
        } else {
          if (res.code == 200) {
            var data = res.data.data;
            console.log(data)
            _this.userlist = data;
          }

        }
      }, function (err) { }, myToken)


      // const { data:res } = await this.$http.post("users",this.queryInfo);
      // if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      // this.menulist = res.data
      // console.log(res)
    },
    //审核通过
    passClick(row) {
      //todo 璐姐 弹出窗二次确认?

      var _this = this;
      var myToken = window.localStorage.getItem("token");
      _this.$refs.createObj.validate(valid => {
        if (!valid) return false;
        var dataObj = {
          id:row.id,
          examine_status: 1,
        }
        util.call_netA("post", "/admin/cat-room-apply/examine", dataObj, function (data) {
          // 刷新页面
          _this.$router.go(0);
        }, function (err) { }, myToken)
      })

    },

    //审核拒绝
    refuseClick(row) {
      //todo 璐姐 弹层, 输入错误原因

      var _this = this;
      var myToken = window.localStorage.getItem("token");
      var reason  ="todo 璐姐 改下获取错误原因"

      _this.$refs.createObj.validate(valid => {
        if (!valid) return false;
        var dataObj = {
          id: row.id,
          examine_status: 2,
          examine_content: reason,
        }
        util.call_netA("post", "/admin/cat-room-apply/examine", dataObj, function (data) {
           // 刷新页面
          _this.$router.go(0);
        }, function (err) { }, myToken)
      })

      console.log(row);
    }
  },
};
</script>

<style scoped>
 /*todo 璐姐 改下多图样式*/ 
.image-item {
  max-width: 100px;
  max-height: 100px;
  margin-right: 10px; /* 添加右边距以分隔图片 */
}

</style>
